<template>
  <div class="settings">
    <a-tabs defaultActiveKey="1" tabPosition="left" size="large">
      <a-tab-pane tab="设置" key="1">
        <a-row :gutter="20">
          <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
            <a-form-item label="网站名">
              <a-input v-model="settings.name" size="large" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
            <a-form-item label="作者">
              <a-input v-model="settings.author" size="large" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="20">
          <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
            <a-form-item label="邮箱">
              <a-input v-model="settings.email" size="large" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
            <a-form-item label="API">
              <a-input v-model="settings.api" size="large" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="20">
          <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
            <a-form-item label="API版本">
              <a-input disabled v-model="settings.apiVersion" size="large" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
            <a-form-item label="静态文件API">
              <a-input v-model="settings.staticApi" size="large" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="20">
          <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
            <a-form-item label="用户名">
              <a-input v-model="settings.username" size="large" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
            <a-form-item label="密码">
              <a-input-password disabled v-model="settings.password" size="large" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="20">
          <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
            <a-form-item label="简介">
              <a-textarea v-model="settings.abstract" :rows="4" size="large" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
            <a-form-item label="描述">
              <a-textarea v-model="settings.description" :rows="4" size="large" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item style="text-align: center">
          <a-button type="primary" size="large" ghost shape="round" @click="changeSettins">修改</a-button>
        </a-form-item>

      </a-tab-pane>

      <a-tab-pane tab="数据库" key="2">
        <a-row :gutter="20">
          <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
            <a-form-item label="数据库Driver">
              <a-input disabled v-model="settings.database.driver" size="large" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
            <a-form-item label="数据库名">
              <a-input v-model="settings.database.name" size="large" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="20">
          <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
            <a-form-item label="用户名">
              <a-input v-model="settings.database.user" size="large" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
            <a-form-item label="密码">
              <a-input-password disabled v-model="settings.database.password" size="large" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item style="text-align: center">
          <a-button type="primary" size="large" ghost shape="round" @click="changeSettins">修改</a-button>
        </a-form-item>
      </a-tab-pane>

      <a-tab-pane tab="赛邮云" key="3">

        <a-row :gutter="20">
          <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
            <a-form-item label="邮件ID">
              <a-input-password v-model="settings.submail.email_id" :rows="4" size="large" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
            <a-form-item label="邮件Key">
              <a-input-password v-model="settings.submail.email_key" :rows="4" size="large" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="20">
          <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
            <a-form-item label="短信ID">
              <a-input-password v-model="settings.submail.sms_id" :rows="4" size="large" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
            <a-form-item label="短信Key">
              <a-input-password v-model="settings.submail.sms_key" :rows="4" size="large" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item style="text-align: center">
          <a-button type="primary" size="large" ghost shape="round" @click="changeSettins">修改</a-button>
        </a-form-item>
      </a-tab-pane>

    </a-tabs>
  </div>
</template>

<script>
  import app from "../../../app"
  export default {
    name: "settings",
    layout: "admin",
    head: ()=>({ title: `设置 - ${app.name}` }),
    async asyncData({ $axios, store, error }) {
      let url = `${app.api}/api/${app.apiVersion}/admin/settings/`;
      const resp = await $axios.$get(url);
      let settings = resp.code === 200 ? resp.data : {};
      return { settings }
    },
    methods: {
      changeSettins(e){
        this.$axios.$put(`${app.api}/api/${app.apiVersion}/admin/settings`, this.settings)
          .then((resp)=>{
            console.log(resp)
            if (resp.code === 200) {
              this._data.settings = resp.data;
              this.$message.success(resp.msg)
            }else {
              this.$message.warning(resp.msg)
            }
          }).catch((err)=>{

        })
      }
    }
  }
</script>

<style scoped>

</style>
